import React from 'react'
import PropTypes from 'prop-types'
import {Modal, Table} from 'antd'
import classnames from 'classnames'
import {DropOption} from 'components'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'

const {confirm} = Modal

const List = ({
                onDeleteItem, onEditItem, isMotion, location, ...tableProps
              }) => {

  const handleMenuClick = (record, e) => {
    if (e.key === 'edit') {
      onEditItem(record)
    } else if (e.key === 'delete') {
      confirm({
        title: '您确定要删除这条数据吗?',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          onDeleteItem(record.id)
        },
      })
    }
  }

  const columns = [
    {
      title: '归属员工',
      dataIndex: 'emp',
      key: 'emp_username',
      render: emp => emp ? emp.username : "-",
    }, {
      title: '编号',
      dataIndex: 'sn',
      key: 'sn',
    }, {
      title: '录入时间',
      dataIndex: 'ctime',
      key: 'ctime',
    }, {
      title: '录入人',
      dataIndex: 'inputer',
      key: 'inputer.username',
      render: inputer => inputer ? inputer.username : "-",
    }, {
      title: '最后编辑时间',
      dataIndex: 'mtime',
      key: 'mtime',
    }, {
      title: '最后更新时间',
      dataIndex: 'utime',
      key: 'utime',
    }, {
      title: '手机UUID码',
      dataIndex: 'deviceCode',
      key: 'deviceCode',
    }, {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',

    }, {
      title: '手机软件版本号',
      dataIndex: 'softwareVersion',
      key: 'softwareVersion',
    },
    {
      title: '操作',
      key: 'operation',
      width: '100',
      fixed: 'right',
      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e)}
                           menuOptions={[{key: 'edit', name: '编辑'}, {
                             key: 'delete',
                             name: '删除',
                           }]}/>
      },
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table, {[styles.motion]: isMotion})}
      scroll={{x: 1500}}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        body: {wrapper: isMotion ? AnimateBody : CommonBody},
      }}
    />
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default List
